<template>
  <div class="last">
    <ul>
      <!-- <li v-for="(arr,index) in arrs" :key=index>{{ arr }}</li> -->
      <li v-for="(user,index) in lists" :key=index v-on:click="user.show=!user.show">
        <h2>{{user.name}}</h2>
        <h3 v-show="user.show">{{user.movie}}</h3>
      </li>
    </ul>
    <!-- <div v-for="(lis,index) in lists" :key=index>
      <div v-for="(li,index) in lis" :key=index>{{ li }}</div>
    </div> -->
  </div>
</template>

<script>
export default {
  // el:".last",只能在new创建的关键字中使用
  data() {
   return{
      arrs: ["小明", "小红", "小兰", "小绿","首页","合作","图片","概览","关于"],
    lists: [
      {name:"路飞",movie:"海贼王",show:false},
      {name:"路飞",movie:"海贼王",show:false},
      {name:"路飞",movie:"海贼王",show:false},
      {name:"路飞",movie:"海贼王",show:false},
      {name:"路飞",movie:"海贼王",show:false},
      {name:"路飞",movie:"海贼王",show:false},
      {name:"路飞",movie:"海贼王",show:false},
      {name:"路飞",movie:"海贼王",show:false},
      {name:"路飞",movie:"海贼王",show:false},
      {name:"路飞",movie:"海贼王",show:false},
      {name:"路飞",movie:"海贼王",show:false},
      {name:"路飞",movie:"海贼王",show:false},
      {name:"路飞",movie:"海贼王",show:false},
      {name:"路飞",movie:"海贼王",show:false},
    ]
   }
  },
  methods: {}
};
</script>

<style lang="less" scoped>
div {
  background: black;
  height: 50px;
}
li{
  float: left;
  list-style: none;
  line-height: 50px;
  padding-right: 40px;
  color: white;
}
h1 {
  color: #eee;
  text-align: center;
}
h3{
  color: red;
}
</style>
